<template>
  <td :data-infinite-fixed="fixed===''?undefined:fixed">
    <slot>
      <template v-if="maxLength>0 && getValue().length>maxLength">
        <el-popover trigger="hover" :placement='placement' :width='popWidth'>
          <span slot="reference">{{getValue(true)}}</span>
          <div>{{getValue()}}</div>
        </el-popover>
      </template>
      <template v-else>
        {{getValue()}}
      </template>
    </slot>
  </td>
</template>

<script>
export default {
  props: {
    prop: {
      type: String,
      validator: function(value) {
        let flag = true;
        if (typeof value === 'string' && !/^\s|\s$/.test(value)) {
          flag = true;
        } else {
          console.error('请传入字符串并去除前后空格');
          flag = false;
        }
        return flag;
      },
    },
    fixed: {
      type: String,
      default: '',
    },
    maxLength: {
      type: Number,
      default: -1,
    },
    placement: {
      type: String,
      default: 'bottom',
    },
    popWidth: {
      type: Number,
      default: 150,
    },
  },
  computed: {
    row() {
      return this.$parent.row;
    },
  },
  methods: {
    getValue(flag) {
      let val = '';
      if (this.prop === undefined) return '';
      this.prop.split('.').forEach(k => {
        val = val === '' ? this.row[k] : val[k];
      });
      val = [undefined, null].includes(val) ? '　' : val;
      if (val.length > this.maxLength && this.maxLength > -1 && flag) {
        val = val.substring(0, this.maxLength) + '...';
      }
      return val;
    },
  },
};
</script>
